<template>
  <a-modal
    title="选择订单"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="8" :md="12" :sm="24">
            <a-form-item label="订单号">
              <a-input v-model="queryParam.orderNo" placeholder="请输入订单号" allow-clear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="12" :sm="24">
            <a-form-item label="客户名称">
              <a-input v-model="queryParam.customerName" placeholder="请输入客户名称" allow-clear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="12" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 订单列表 -->
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      size="middle"
      bordered
      rowKey="id"
      :rowSelection="rowSelection"
      @change="handleTableChange">
      
      <template slot="orderStatus" slot-scope="text">
        <a-tag v-if="text === 9" color="blue">已生产</a-tag>
        <a-tag v-else-if="text === 10" color="green">已入库</a-tag>
        <span v-else>{{ text }}</span>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import { getAvailableOrdersForInbound } from '@/api/wms/finishedGoodsInbound'

export default {
  name: 'OrderSelectModal',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      loading: false,
      dataSource: [],
      selectedOrder: null,
      queryParam: {},
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: '订单号',
          align: 'center',
          dataIndex: 'orderNo'
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'customerName'
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'projectName'
        },
        {
          title: '订单状态',
          align: 'center',
          dataIndex: 'orderStatus',
          scopedSlots: { customRender: 'orderStatus' }
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        }
      ],
      rowSelection: {
        type: 'radio',
        selectedRowKeys: [],
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedOrder = selectedRows[0] || null
        }
      }
    }
  },
  methods: {
    show() {
      this.visible = true
      this.loadData()
    },
    handleOk() {
      if (!this.selectedOrder) {
        this.$message.warning('请选择一个订单')
        return
      }
      this.$emit('ok', this.selectedOrder)
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.selectedOrder = null
      this.queryParam = {}
      this.dataSource = []
      this.rowSelection.selectedRowKeys = []
    },
    loadData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      const params = Object.assign({}, this.queryParam, {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize
      })
      this.loading = true
      getAvailableOrdersForInbound(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    searchQuery() {
      this.loadData(1)
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1)
    },
    handleTableChange(pagination) {
      this.ipagination = pagination
      this.loadData()
    }
  }
}
</script>
